<template>
  <div class="carouselImageComponent" v-if="oItem" :style="{
    paddingTop: oItem.main.wrapperPT+'px',
    paddingBottom: oItem.main.wrapperPB+'px',
    paddingLeft: oItem.main.wrapperPLR+'px',
    paddingRight: oItem.main.wrapperPLR+'px',
  }">
    <div class="content" :style="{
      backgroundColor: oItem.main.wrapperBgColor,
      backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none',
      borderTopLeftRadius: oItem.main.wrapperBTR+'px',
      borderTopRightRadius: oItem.main.wrapperBTR+'px',
      borderBottomLeftRadius: oItem.main.wrapperBBR+'px',
      borderBottomRightRadius: oItem.main.wrapperBBR+'px',
    }">
      <div
        class="imageSwiper"
        :class="
          oItem.main.carouselDotsPositionCls +
          ' ' +
          oItem.main.carouselDotsStyleCls +
          (oItem.main.carouselList.length == 1 ? ' noIndicators' : '')
        "
        :style="{
          paddingTop: oItem.main.paddingTop + 'px',
          paddingBottom: oItem.main.paddingBottom + 'px',
          paddingLeft: oItem.main.paddingLR + 'px',
          paddingRight: oItem.main.paddingLR + 'px',
        }"
      >
        <el-carousel
          trigger="click"
          :indicator-position="oItem.main.indicatorPosition"
          :height="oItem.main.wrapperHeight + 'px'"
          :interval="oItem.main.interval * 1000"
          :type="oItem.main.type"
          :direction="oItem.main.direction"
          :autoplay="oItem.main.autoplay"
          :loop="oItem.main.loop"
          :indicatorsActiveColor="oItem.main.carouselDotsHighLightColor||'transparent'"
          @change="carouselChange"
        >
          <el-carousel-item
            v-for="(cl, clIndex) in oItem.main.carouselList"
            :key="cl.id"
            :style="{
                borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
                borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
                borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
                borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
              }"
          >
            <img
              :src="cl.imgUrl ? cl.imgUrl : cl.default"
              alt=""
              @load="imageSwiperItemImgLoad($event, clIndex)"
              :style="{
                borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
                borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
                borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
                borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
              }"
            />
          </el-carousel-item>
          <span
            class="indicatorsStyleNumberInfo"
            v-if="oItem.main.carouselDotsStyleCls == 'indicatorsStyleNumber'"
            ><i :style="{
              fontStyle:'normal',
              color: oItem.main.carouselDotsHighLightColor
            }"></i>{{ carouselIndex + 1 }}/{{
              oItem.main.carouselList.length
            }}</span
          >
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "carouselImageComponent",
  data() {
    return {
      oItem: null,
      carouselIndex: 0,
    };
  },
  props: ["item", "ename", "id"],
  components: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      //console.log("carouselImageComponent被通知更新");
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
    carouselChange(e){
      this.carouselIndex = e;
    },
    //轮播图组件中，图片加载后，获取图片高度
    imageSwiperItemImgLoad(e, clIndex) {
      // //console.log(e);
      // if (clIndex === 0) {
      //     let h = e.path[0].offsetHeight;
      //     let controls = JSON.parse(JSON.stringify(this.decorate.controls));
      //     controls[this.controlsIndex].right[this.rightIndex].catalog[this.catalogIndex].list[clIndex].height = h;
      //     this.$store.dispatch("controls", controls);
      // }
      // this.controls[index].list[clIndex].height = e.path[0].offsetHeight + "px"; //暂时以第一张的图片的高度为组件高度，此句先注释
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>

<style scoped lang="scss">
.carouselImageComponent {
  box-sizing: border-box;
  .content{
    
    display: flex;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    overflow: hidden;
        .imageSwiper{width:100%;height:100%;}
    }
  .el-carousel__container {
    position: relative;
    .indicatorsStyleNumberInfo {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 0 5px;
      border-radius: 50px;
      font-size: 10px;
      bottom: 10px;
      z-index: 2;
    }
  }
  .indicatorsLeft {
    .indicatorsStyleNumberInfo {
      left: 5%;
    }
  }
  .indicatorsRight {
    .indicatorsStyleNumberInfo {
      right: 5%;
    }
  }
  .indicatorsCenter {
    .indicatorsStyleNumberInfo {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}
</style>

<style lang="scss">
.carouselImageComponent {
  .el-carousel__button {
    width: 15px;
    border-radius: 5px;
    height: 4px;
  }
  .indicatorsLeft {
    .el-carousel__indicators {
      left: 5%;
      transform: none;
    }
  }
  .indicatorsRight {
    .el-carousel__indicators {
      left: auto;
      right: 5%;
      transform: none;
    }
  }
  .indicatorsStyleDot {
    .el-carousel__button {
      width: 8px;
      border-radius: 100%;
      height: 8px;
    }
  }
  .indicatorsStyleNumber,
  .noIndicators {
    .el-carousel__indicators {
      display: none;
    }
  }
}
</style>
